import React from "react"
import Header from  "../header/index"
import {isLogin,plusAddress} from "../../api/index"
import {Button,Toast} from "antd-mobile"
import "./plusAddress.css"
class PlusAddress extends React.Component{
    constructor(){
        super();
        this.state={
            username:"",
            userphone:"",
            detailAddr:"",
            tag:"",
            sex:1,
            MeatAddress:"",
            userid:"",
            geohash:"",
            tagType:""
        }
    }
    componentWillMount(){
        console.log(this.props.location)
        let templateAddress =sessionStorage.getItem("templateAddress");
        if(templateAddress){
            console.log(templateAddress)
            templateAddress=JSON.parse(templateAddress)
            this.setState({
                username:templateAddress.username,
                userphone:templateAddress.userphone,
                detailAddr:templateAddress.detailAddr,
                tag:templateAddress.tag,
                sex:templateAddress.sex
            })

        }
        if(!this.props.location.state){
            return
        }else{
            this.setState({
                MeatAddress:this.props.location.state.name,
                geohash:this.props.location.state.geohash,
            })
        }
        // if(this.props.location.state.name){

        // }
    }
    componentDidMount(){
        
        isLogin().then(res=>{
            console.log(res.data.id)
            this.setState({
                userid:res.data.id
            })
            // if(!res.data.avatar){
            //     this.setState({
            //         status:res.data.status,
            //         username:"登陆/注册"
            //     })
            // }else{
            //     this.setState({
            //         status:1,
            //         username:res.data.username,
            //         id:res.data.id,
            //         gift_amount:res.data.gift_amount,
            //         point:res.data.point,
            //         imgUrl:`//elm.cangdu.org/img/${res.data.avatar}`    
            //     })
            // }
        })
     }
    selectSex(){
        // console.log(1)
        this.setState({
            sex:1
        })
    }
    selectSexFe(){
        this.setState({
            sex:2
        })
    }
    toSearchdetailAddr(){
        this.props.history.push("/mine/userInfo/address/add/addDetail")
        console.log(1)
        var obj ={
            username:this.state.username,
            userphone:this.state.userphone,
            sex:this.state.sex,
            detailAddr:this.state.detailAddr,
            tag:this.state.tag,
        }
        console.log(obj)
        sessionStorage.setItem("templateAddress",JSON.stringify(obj))
    }
    usnHandler(e){
        this.setState({
            username:e.target.value
        })
    }
    phoneHandler(e){
        this.setState({
            userphone:e.target.value
        })
    }
    detailAddrHandler(e){
        this.setState({
            detailAddr:e.target.value
        })
    }
    changeTag(e){
        this.setState({
            tag:e.target.value
        })
    }
    confirmHandler(){
             if(this.state.tag=="家"){
                 console.log(11)
                 this.setState({
                    tagType:2
                 })
             }else if(this.state.tag=="学校"){
                this.setState({
                    tagType:3
                 })
             }else if(this.state.tag=="公司"){
                this.setState({
                    tagType:4
                 })
             }else{
                this.setState({
                    tag:"无",
                    tagType:1
                 })
             }
             setTimeout(()=>{
                 let { username,
                 userphone,
                 detailAddr,
                 tag,
                 sex,
                 MeatAddress,
                 userid,
                 geohash,
                 tagType}  = this.state;
                 
                 if(username&&userphone&&detailAddr&&tag&&MeatAddress&&userid&&geohash&&tagType){
                    let obj = {
                        address:MeatAddress,
                        address_detail:detailAddr,
                        geohash:geohash,
                        name:username,
                        phone:userphone,
                        tag:tag,
                        sex:sex,
                        phone_bk:15305184776,
                        user_id:userid,
                        tag_type:tagType
                     }
                     plusAddress(obj).then(res=>{
                           console.log(res)
                           this.props.history.push("/mine/userInfo/address")
                    })
                 }else{
                    Toast.info('请正确填写', 1);
                 }
                
                console.log(this.state)
             },200)
            //  this.setState=({
            //     username:"",
            //     userphone:"",
            //     detailAddr:"",
            //     tag:"",
            //     sex:1,
            //     MeatAddress:"",
            //     userid:"",
            //     geohash:"",
            //     tagType:""
            // })
             sessionStorage.removeItem("templateAddress")
             
    }
    render(){
        let {username,userphone,detailAddr,tag,MeatAddress,sex} =this.state;
        console.log(sex)
        return(
            <div>
                <Header title={"增加地址"}/>
                <div className="userInfo-mask"></div>
                <div className="plusAddress-container">
                        <section className="plusAddress-userName-wrap">
                            <div className="plusAddress-userName-left">
                                <span>联系人</span>
                            </div>
                            <div className="plusAddress-userName-right">
                                <input type="text" className="plusAddress-userName" value={username} placeholder="你的名字" onChange={this.usnHandler.bind(this)}/>
                                <div className="plusAddress-sex-wrap">
                                    <div className="plusAddress-sex-male" onClick={this.selectSex.bind(this)}>
                                        <div className={this.state.sex==1?'selected-sexIcon':"select-sexIcon"}></div>
                                        <span>先生</span>
                                    </div>
                                    <div className="plusAddress-sex-female" onClick={this.selectSexFe.bind(this)}>
                                        <div className={this.state.sex==1?'select-sexIcon':"selected-sexIcon"}></div>
                                        <span>女士</span>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section className="plusAddress-userName-wrap">
                            <div className="plusAddress-userName-left">
                                 <span>联系电话</span>
                            </div>
                            <div className="plusAddress-userName-right">
                                 <input type="number" className="plusAddress-phone" value={userphone} placeholder="你的手机号" onChange={this.phoneHandler.bind(this)}/>
                            </div>
                        </section>
                        <section className="plusAddress-userName-wrap">
                            <div className="plusAddress-userName-left">
                                <span>送餐地址</span>
                            </div>
                            <div className="plusAddress-userName-right">
                                <input type="text" className="plusAddress-userName"  placeholder="小区/学校/写字楼" value={MeatAddress} onClick={this.toSearchdetailAddr.bind(this)}/>
                                <div className="plusAddress-sex-wrap">
                                <input type="text" className="plusAddress-phone" placeholder="详细地址" value={detailAddr} onChange={this.detailAddrHandler.bind(this)}/>   
                                </div>
                            </div>
                        </section>
                        <section className="plusAddress-userName-wrap">
                            <div className="plusAddress-userName-left">
                                 <span>标签</span>
                            </div>
                            <div className="plusAddress-userName-right">
                                 <input type="text" className="plusAddress-phone" placeholder="无/家/学校/公司" value={tag} onChange={this.changeTag.bind(this)}/>
                            </div>
                        </section>
                        
                </div>
                <Button className="login-submit" onClick={this.confirmHandler.bind(this)}>新增地址</Button>
            </div>
        )
    }
}

export default PlusAddress